<template>
  <div>
    <div class="provider-list">
      <div class="header"></div>
      <div class="content content-table">
        <el-table
          ref="multipleTableRef"
          border
          :data="list"
          style="width: calc(100% - 20px)"
        >
          <el-table-column
            property="id"
            label="序号"
            width="100"
            align="center"
          />
          <el-table-column property="huiyuanmingcheng" label="会员名称" align="center" />
          <el-table-column
            property="jiage"
            label="会员价格/元"
            align="center"
          />
          <el-table-column
            property="shichang"
            label="时长/月"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="250"
            align="center"
          >
            <template #default="scope">
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'edit')"
                >编辑</el-button
              >
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                v-if="scope.row.huiyuanleixing == 'gerenhuiyuan'"
                @click.prevent="onOperation(scope.row, 'purchase')"
                >购买记录</el-button
              >
              <el-button
                style="min-width: auto"
                link
                type="primary"
                size="small"
                v-if="scope.row.huiyuanleixing == 'qiyehuiyuan'"
                @click.prevent="onOperation(scope.row, 'membership')"
                >会员记录</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import {GetMemberList} from "@/api/membership";
import { baseMsg, elMessageTip } from "@/utils/utils";
const route = useRoute();
const router = useRouter();
const list = ref([]);
const show = ref(false);

const GetList = async () => {
  const res = await GetMemberList();
  list.value = res.data;
};
// 操作
const onOperation = (params, operation) => {
  if (operation === "edit") {
    router.push({
      path: `/huiyuanquanyi/info`,
      query: {
        id: params.id,
      },
    });
  }
  if (operation === "membership") {
    router.push({
      path: `/huiyuanquanyi/membershipRecord`,
      query: {
        id: params.id || null,
        type: operation,
      },
    });
  }
  if (operation === "purchase") {
    router.push({
      path: `/huiyuanquanyi/purchaseRecord`,
      query: {
        id: params.id || null,
        type: operation,
      },
    });
  }
};
GetList();
</script>
<style lang="scss" scoped>
.header {
  border-bottom: 10px solid #f2f2f2;
}
.header-line1 {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
}
.header-line2 {
  padding: 20px 10px;
}
.content {
  border: none !important;
  margin: 20px 10px;
  background-color: transparent !important;
}
.introduce {
  padding: 40px 10px 0 10px;
  color: #000;
  margin: auto;
}
</style>
<style lang="scss">
.content-table .el-table__header th {
  background-color: #f2f9fc !important;
}
</style>
